<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:800px;
            height:600px;
            position: relative;
            margin: 100px auto;
            background:#000000;
            border:2px solid red;
            overflow: hidden;
        }
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    // 动画  :
    // animate(); 以结果为导向进行 jQuery ;
    // 选择元素 : $(选择符)
    // $("#box").animate({
    //     width : 100,
    //     height : 100
    // },5000)
        // 构造函数获取实例对象
        // 绑定事件功能
       function FireWork(){
           this.box=document.querySelector('#box')
           this.bindEvent();
       }

        // 给容器绑定事件 ;
        // 主体烟花创建并运动到目标点; 
            // 创造烟花元素的函数
            // 让元素有一个可靠的起始点;
            // 创建一个div子元素
            // 运动;
            // 运动结束有一个回调函数;
                // 高度与鼠标点击位置平齐
                // 到达预定高度去除该元素
        FireWork.prototype.bindEvent=function(){
            var self = this;
            self.box.onclick=function(evt){
                var e=evt||window.event
                var fire = self.creatfire();
                fire.style.left=e.offsetX+'px'
                $(fire).animate({
                    top:e.offsetY
                },1000,function(){
                    fire.remove();
                    self.boom( e.offsetX , e.offsetY);
                })
            }
        }
    // 动态创建div子元素
        //  1. 创建一个div;
        //  2. div放在页面之中;
        // 统一给创建的子元素一个类名
        //给动态创建的div元素一个随机的颜色    
        
        // 把这个div子元素加在父元素里面
        // 一定要记得返回数据，不然子元素出不来

        FireWork.prototype.creatfire=function(){
            var self = this;
            var div = document.createElement('div')
            div.className='ball';
            div.style.backgroundColor='#'+Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0');
            self.box.appendChild(div)
            return div
        }

    
    
       // 创建炸开的烟花
            // 角度(初始角度)
            // 半径 (斜边)
            // 循环把每一个小烟花的角度沿着原点旋转
                // 调用创造烟花的函数创建小烟花
                // 记得给小烟花设定初始位置
                // 计算目标值; 角度和半径一块计算出来的;
                // 在JS之中没有角度 : 有弧度; π / 180 
                // 角度转换弧度 π / 180 * deg;
                // 调用运动函数把小烟花运动轨迹呈现出来
                    // this 指向当前的DOM对象;

    FireWork.prototype.boom = function(x,y){
        var deg = 0;
        var r = 200;
        for(var i = 0 ; i < 20 ; i++){
            var minfire=this.creatfire();
            minfire.style.top = y + 'px';
            minfire.style.left= x + 'px';
            deg+=18;
            var targe_x=Math.round(Math.cos(Math.PI/180*deg)*r);
            var targe_y=Math.round(Math.sin(Math.PI/180*deg)*r);
            $(minfire).animate({
                top:targe_y+y,
                left:targe_x+x
            },5000,function(){
                this.remove();
            })
        }
    }

    var fw = new FireWork();
 
</script>
</html>